<template>
  <div>
    <div class="playMusic" @click="playMusic">
      <img class="auto" v-if="!auto" src="/static/images/play.png" alt />
      <img v-if="auto" src="/static/images/pause.png" alt />
      <!-- <audio
        :src="src"
        id="greetings"
        loop
      ></audio> -->
    </div>
  </div>
</template>

<script>
export default {
  props: ["src"],
  data() {
    return {
      audioCtx: "",
      auto: false
    };
  },
  methods: {
    playMusic() {
      console.log(this.auto);
      this.auto = !this.auto;
      if (this.auto) {
        this.audioCtx.pause();
      } else {
        this.audioCtx.play();
      }
    }
  },
   onLoad() {
    this.audioCtx = wx.createAudioContext("greetings");
    this.audioCtx.play();
  },
};
</script>

<style>
.playMusic {
  position: fixed;
  right: 0;
  top: 80px;
}
.playMusic img {
  width: 45px;
  height: 45px;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
  }
}
.auto {
  transform: rotate(360deg);
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
}
</style>
